<template>
  <view class="goods-detail">
    <!-- 轮播图 -->
    <u-swiper
      @click="carouselClick"
      :list="goods.pics"
      name="pics_big"
      height="497"
      img-mode="aspectFit"
      bg-color="#ffffff"
    ></u-swiper>
    <!-- 文本 -->
    <view class="goods-introduce" style="height: 220rpx">
      <view class="goods-price">￥{{ goods.goods_price }}</view>
      <view class="goods-text u-line-2">{{ goods.goods_name }}</view>
    </view>
    <!-- 线 -->
    <u-line color="#666"></u-line>
    <!-- 图文详情 -->
    <view class="introduce">
      <view class="introduce-title u-p-15 u-text-center">图文详情</view>
      <!-- 富文本 -->
      <view class="introduce-content">
        <u-parse :html="goods.goods_introduce"></u-parse>
      </view>
    </view>
    <!-- 底部 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <navigator open-type="switchTab" :url="'/pages/cart/cart'" class="item car">
          <u-badge
            class="car-num"
            :count="count"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="cartClick">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState,mapMutations } from 'vuex'
export default {
  data() {
    return {
      goods: null, //用于存放商品信息数据
    };
  },
  computed: {
    ...mapState({
      // 总数量
      count:(state)=>
        // console.log(state);
        state.cart.cartList.reduce((count,item)=>(count+=item.nums),0)
    })
  },
  onLoad({ goods_id }) {
    // console.log(goods_id);
    goods_id = goods_id || 47869;
    this.getGoodsDetail(goods_id);
    // this.cheSe();
  },
  methods: {
    ...mapMutations(["cart/cartClick"]),
    async getGoodsDetail(goods_id) {
      this.goods = await this.$u.get("/goods/detail", { goods_id });
      // console.log(this.goods);
    },
    // async cheSe() {
    //   await this.$u.get("/goods/qsearch", { query: "创维" });
    // },
    // 轮播图点击事件
    carouselClick(index) {
      console.log(1);
      const urls = this.goods.pics.map((item) => item.pics_big);
      const current = index;
      uni.previewImage({ urls, current });
    },
    // 添加购物车
    cartClick(){
      // console.log(this.$store.state.cart.cartList);
      this["cart/cartClick"]({value:this.goods})
      // console.log(this.goods,104);
    }
  },
};
</script>

<style lang="scss">
.goods-detail {
  padding-bottom: 100rpx;
}
.goods-introduce {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.goods-price {
  color: #eb4450;
  font-size: 16px;
  font-weight: 900;
}
.goods-text {
  margin-top: 10px;
}
// 底部样式
.navigation {
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  justify-content: space-evenly;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .car,
    .buy {
      width: 200rpx;
      text-align: center;
    }
    .cart {
      background-color: #ff7900;
      margin-right: 30rpx;
    }
    .buy {
      // text-align: center;
      // width: 200rpx;
      background-color: #ed3f14;
    }
  }
}
</style>